<template>
    <div>
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>

        <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="item in imgArray" :key="item.name">
                <img :src='item.imgUrl' style='width: 100%; height: inherit'>
            </el-carousel-item>
        </el-carousel>

        <span>用户名</span>
        <el-input v-model="username" placeholder='请输入用户名' style='width: 60%;'></el-input>
        <br>
        <span>密码</span>
        <el-input v-model="password" placeholder='请输入密码' show-password style='width: 60%; margin-top: 10px'></el-input>
        <br>
        <el-button type="primary" style="margin-top: 10px; margin-left: 500px;" @click="login">登录</el-button>
    </div>
</template>

<script>
import {userlogin} from '../api/data.js'
export default {
    name: 'pages1',
    data() {
        return {
            username: '',
            password: '',
            // student: {
            //     "name": "John Doe",
            //     "age": 30,
            //     "isStudent": true,
            //     "city":"guangZhou",
            // },
            // student2: [
            //     {'name': '张三', 'age': 30},
            //     {'name': '李四', 'age': 25},
            //     {'name': '刘二', 'age': 30},
            // ],
            imgArray: [{
                    'name': '1',
                    'imgUrl': require('../assets/img/1.jpeg'),
                }, {
                    'name': '2',
                    'imgUrl': require('../assets/img/2.jpeg'),
                }, {
                    'name': '3',
                    'imgUrl': require('../assets/img/3.jpeg'),
                },
            ],
        };
    },
    methods: {
        login() {
            console('用户名', this.username);
            console('密码', this.password);
            userlogin({username:this.username,password:this.password}).then(res=>{})
            console.log("接口返回：",res)
            if (this.username != '张三') {
                this.$message.error('您的用户名输入错误');
            } else if (this.password != '123456') {
                this.$message.error('您的密码输入错误');
            } else {
                this.$router.push('/page2');
            }
        },
    },
}
</script>
<style>
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}
  
.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
 }
  
.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
</style>